<template>
  <div class="navigator" :class="{active:isActive}">
    <h1 class="logo">
      <a href="#" @click="showAlert">
        <span>I ღ you</span>
      </a>
    </h1>
    <div class="tabs">
      <a href="#" class="tab right router-link-exact-active router-link-active">
        <span>首页</span>
      </a>
      <a href="#" class="tab right">
        <span>文档</span>
      </a>
      <a href="#" class="tab right">
        <span>示例</span>
      </a>
      <span class="langs">
          <a href="#" class="active">中</a>
          <a href="#" class="">En</a>
        </span>
    </div>
    <span class="toggle-nav" @click="tabs_show()">
        <img
          src="">
      </span>
  </div>
</template>

<script>
  export default {
    name: 'MyHeader',
    data () {
      return {
        isActive: false
      }
    },
    methods: {
      tabs_show: function () {
        this.isActive = this.isActive !== true
      },
      showAlert: function () {
        this.$createDialog({
          type: 'alert',
          title: '千千',
          content: '我爱你呀',
          icon: 'cubeic-love'
        }).show()
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">
  didi_color=#fc9153
  .navigator {
      width 100%
      height 70px
      opacity 0.9
      line-height 70px;
      margin-top: -70px
      background-color #96D9E4;
      transition all .3s ease;
      overflow hidden;

      .logo {
        float left;
        background-color #fc9153;
        a {
          display inline-block;
          padding 0 28px;
          color #fff;
          font-size 20px;
          &:before {
            content "";
            display inline-block;
            background url('../assets/翻译1.png') no-repeat;
            background-position center
            width 72px;
            height 72px;
            margin-right 10px;
            vertical-align middle;
          }
          span {
            color my_blue
            vertical-align middle;
          }
        }
      }
      .tabs {
        background-color #4a4c5b
        float right;
        padding 0 30px;
        transition all .25s ease;
        .tab {
          display: inline-block;
          margin: 0 10px;
          color: #fff;
          transition: color .2s;
          &:hover {
            color didi_color
          }
        }
        .router-link-active {
          color didi_color
        }
        .langs {
          display: inline-block;
          margin: 0 20px;
          .active {
            color: didi_color
          }
          a {
            color #fff
            &:after {
              content: "/";
              padding: 0 5px;
            }
            &:hover {
              color didi_color
            }
          }

        }
      }
      .toggle-nav {
        display none;
      }
      @media screen and (max-width 960px) {
        .logo {
          float none;
          background-color transparent;
          text-align center;
          a {
            display inline-block;
          }
        }

        .tabs {
          float none;
          padding 0;
          border-top 1px solid hsla(0, 0%, 100%, .5);
          .tab {
            display: block;
            line-height: 45px;
            margin: 0 20px;
          }
          .langs {
            display: block;
            line-height: 45px;
            margin: 0 20px;
          }
        }

        .toggle-nav {
          display -webkit-box;
          display flex;
          position absolute;
          left 10px;
          top 0;
          width 40px;
          height 70px;
          -webkit-box-align center;
          align-items center;
          -webkit-box-pack center;
          justify-content center;
        }
      }
    }

  .active {
      height 250px
    }

</style>
